<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chubby Stacks | Index</title>

<!-- main JS libs -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>

<!-- Style CSS -->
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="style.css" media="screen" rel="stylesheet">

<!-- General Scripts -->
<script src="js/general.js"></script>

<!-- custom input -->
<script src="js/jquery.customInput.js"></script>

<!-- Placeholders -->
<script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        if($("[placeholder]").size() > 0) {
            $.Placeholder.init();
        }
    });
</script>

<!-- Video Player -->
<link href="css/video-js.css" rel="stylesheet">
<script src="js/video.js"></script>
<script>
    videojs.options.flash.swf = "js/video-js.swf";
</script>

<!-- Audio Player -->
<link href="css/jplayer.css" rel="stylesheet">
<script src="js/jquery.jplayer.min.js"></script>
<script src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"<span class='item-artist'>Rihanna - </span><span class='item-song'>Only Girl</span><img class='item-image' src='images/temp/music-player-4.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
            },
            {
                title:"<span class='item-artist'>Yaki Da - </span><span class='item-song'>Dancing</span><img class='item-image' src='images/temp/music-player-5.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<span class='item-artist'>Pandora - </span><span class='item-song'>Sands of Time</span><img class='item-image' src='images/temp/music-player-6.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
</script>

<!-- Calendar -->
<script src="js/jquery-ui.multidatespicker.js"></script>

<!-- Progress Bars -->
<script src="js/progressbar.js"></script>

<!-- range sliders -->
<script src="js/jquery.slider.bundle.js"></script>
<script src="js/jquery.slider.js"></script>
<link rel="stylesheet" href="css/jslider.css">

<!-- Scroll Bars -->
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar.style1').jScrollPane({
            showArrows: true,
            verticalDragMinHeight: 13,
            verticalDragMaxHeight: 13
        });

        jQuery('.scrollbar.style2').jScrollPane({
            showArrows: true,
            verticalDragMinHeight: 28,
            verticalDragMaxHeight: 28
        });

        jQuery('.scrollbar.style3').jScrollPane({
            showArrows: true,
            verticalDragMinHeight: 38,
            verticalDragMaxHeight: 38
        });

        jQuery('.scrollbar.style4').jScrollPane({
            showArrows: true,
            verticalDragMinHeight: 38,
            verticalDragMaxHeight: 38
        });

        jQuery('.scrollbar.style5').jScrollPane({
            showArrows: true,
            verticalDragMinHeight: 40,
            verticalDragMaxHeight: 40
        });

        // Initial Handle Positions, for showcase only
        jQuery('.scrollbar.style1').data('jsp').scrollTo(0, 200);
        jQuery('.scrollbar.style2').data('jsp').scrollTo(0, 500);
        jQuery('.scrollbar.style3').data('jsp').scrollTo(0, 800);
        jQuery('.scrollbar.style4').data('jsp').scrollTo(0, 300);
        jQuery('.scrollbar.style5').data('jsp').scrollTo(0, 400);
    });
</script>

<!-- Volume, Balance -->
<script type="text/javascript" src="js/knobRot-0.2.2.js"></script>

<!-- Visual Text Editor (NicEdit.js) -->
<script src="js/nicEdit.js"></script>

<!-- Multiselect (Chosen.js) -->
<link rel="stylesheet" href="css/chosen.css">
<script src="js/chosen.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#contact-name').chosen({ width: "100%" });
        jQuery('#commentForm .link-reset').click(function(){
            jQuery("#contact-name").trigger("chosen:updated");
        });
    });
</script>

<!-- Graph Builder -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.flot.js"></script>
<script type="text/javascript" src="js/jquery.flot.resize.js"></script>
<script type="text/javascript">
    $(function() {
        var graphwidth = $('.widget-graph .inner').width();
        $('.widget-graph .graph').css('height', parseInt(graphwidth/1.6));
        $(window).resize(function() {
            graphwidth = $('.widget-graph .inner').width();
            $('.widget-graph .graph').css('height', parseInt(graphwidth/1.6));
        });

        var d1 = [[0, 9], [1, 23], [1.6, 8], [2.2, 24], [2.8, 18], [4, 36]],
        graphholder = $("#graph"),
        plot = $.plot(graphholder, [d1], {
            colors: ["#bfd964", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            xaxis: {
                min: null,
                max: null
            },
            yaxis: {
                autoscaleMargin: 0.02
            },
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(191,217,100,0.23)"
                },
                points: {
                    show: true,
                    radius: 4,
                    lineWidth: 2,
                    fillColor: "#fff"
                },
                shadowSize: 0
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                color: "#aaa",
                borderColor: "#dfdcd6"
            }
        });

        function showTooltip(x, y, contents) {
            $("<div id='graph-tooltip'>" + contents + "</div>").css({top: y - 36, left: x - 22}).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        graphholder.on("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    $("#graph-tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, '$' + y*100);
                }
            } else {
                $("#graph-tooltip").remove();
                previousPoint = null;
            }
        });
    });
</script>

<!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
    .gradient {filter: none !important;}
</style>
<![endif]-->
</head>

<body>
<div class="body-wrap">
    <div class="content">
        <!--container-->
        <div class="container">
            <!-- row -->
            <div class="row">
                <div class="col-md-10 col-md-offset-1 col-sm-12">

                    <!-- row -->
                    <div class="row">
                        <div class="col-sm-6">
                            <h6 class="foo2">Contact Form</h6>

                            <!-- Contact form -->
                            <div class="add-comment styled boxed" id="addcomments">
                                <div class="add-comment-title"><h3>Write a message</h3></div>
                                <div class="comment-form">
                                    <!-- Fire Text Editor -->
                                    <script type="text/javascript">
                                        bkLib.onDomLoaded(function() {
                                            var myNicEditor = new nicEditor({
                                                buttonList : [
                                                    'bold',
                                                    'italic',
                                                    'underline',
                                                    'forecolor',
                                                    'left',
                                                    'center',
                                                    'right',
                                                    'justify'
                                                ]
                                            });
                                            myNicEditor.panelInstance('nicedit-message');

                                            jQuery('#commentForm .link-reset').click(function(){
                                                myNicEditor.removeInstance('nicedit-message');
                                                $('#nicedit-message').val('');
                                                myNicEditor.panelInstance('nicedit-message');
                                            });
                                        });
                                    </script>
                                    <form action="#" method="post" id="commentForm">
                                        <div class="form-inner">
                                            <div class="field_select">
                                                <label for="contact-name" class="label_title">Name:</label>
                                                <select name="contact-name" id="contact-name" multiple data-placeholder="Select Name">
                                                    <option value='example1@gmail.com'>Mike Charley</option>
                                                    <option value='example2@gmail.com'>Andy Lurs</option>
                                                    <option value='example3@gmail.com'>Toby Lightman</option>
                                                    <option value='example4@gmail.com'>Lene Marlin</option>
                                                    <option value='example5@gmail.com'>Deep Purple</option>
                                                </select>
                                            </div>
                                            <div class="field_text lightPlaceholder">
                                                <label for="subject" class="label_title">Subject:</label>
                                                <input type="text" name="subject" id="subject" value="" placeholder="ex. Electrosoul system" />
                                            </div>
                                            <div class="field_text field_textarea">
                                                <label for="nicedit-message" class="label_title">Message:</label>
                                                <textarea name="nicedit-message" id="nicedit-message"></textarea>
                                            </div>
                                        </div>
                                        <div class="rowSubmit">
                                            <a onclick="document.getElementById('commentForm').reset(); return false" href="#" class="link-reset btn btn-middle btn-gray"><span>Discard</span></a>
                                            <span class="btn btn-send"><input type="submit" id="send" value="Send Message" /></span>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!--/ Contact form -->

                            <h6 class="foo2">Search box</h6>

                            <!-- search widget -->
                            <div class="widget-container widget-search boxed styled">
                                <div class="inner">
                                    <form method="get" id="searchform" action="#">
                                        <span class="btn btn-middle btn-caps"><input type="submit" value="Search" /></span>
                                        <div class="field_text lightPlaceholder"><input name="search" value="" type="text" placeholder="Type word here" /></div>
                                    </form>
                                </div>
                            </div>
                            <!--/ search widget -->
                        </div>

                        <div class="col-sm-6">
                            <h6 class="foo2">Audio Player</h6>

                            <!-- Widget Audio Player -->
                            <div class="widget-container widget-audio boxed">
                                <!-- jplayer-->
                                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                                <div id="jp_container_1" class="jp-audio">
                                    <div class="jp-gui jp-interface">
                                        <div class="jp-controls">
                                            <div class="song-title"></div>
                                            <div class="jp-current-time"></div>
                                            <div class="jp-duration"></div>
                                            <div class="clear"></div>
                                            <div class="jp-progress">
                                                <div class="jp-seek-bar">
                                                    <div class="jp-play-bar gradient">
                                                        <div class="jp-seek-handle"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-controls jp-buttons">
                                            <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a><!--
                                        --><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a><!--
                                        --><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a><!--
                                        --><a href="javascript:;" class="jp-play" tabindex="1">play</a><!--
                                        --><a href="javascript:;" class="jp-pause" tabindex="1">pause</a><!--
                                        --><a href="javascript:;" class="jp-next" tabindex="1">next</a><!--
                                        --><a href="javascript:;" class="jp-stop" tabindex="1">stop</a><!--
                                        --><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a><!--
                                        --><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a><!--
                                        --><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a><!--
                                        --><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a><!--
                                        --><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a>
                                        </div>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value"></div>
                                        </div>
                                    </div>
                                    <div class="jp-playlist">
                                        <ul class="jp-playlist-inner">
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="jp-no-solution">
                                        <span>Update Required</span>
                                        <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
                                    </div>
                                </div>
                                <!--/ jplayer-->
                            </div>
                            <!-- Widget Audio Player -->

                            <h6 class="foo2">Progress Bar</h6>

                            <!-- Progress Bar -->
                            <div id="progressBar1" class="progressbar">
                                <span class="mark-left">0%</span>
                                <span class="mark-right">100%</span>
                                <div class="percent"></div>
                                <div class="total"></div>
                                <div class="elapsed"></div>
                                <div class="remained"></div>
                                <div class="pbar"></div>
                            </div>
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $('#progressBar1').anim_progressbar({
                                        totaltime: 120
                                    });
                                });
                            </script>
                            <!--/ Progress Bar -->

                            <!-- Range slider -->
                            <div class="range-slider styled">
                                <input id="price-range" type="text" name="price-range" value="240;760">
                            </div>
                            <script type="text/javascript" >
                                jQuery(document).ready(function($) {
                                    // Price Range Input
                                    $("#price-range").rangeslider({
                                        from: 0,
                                        to: 1000,
                                        limits: false,
                                        scale: ['0$', '1000$'],
                                        heterogeneity: ['50/500'],
                                        step: 10,
                                        smooth: true,
                                        dimension: '$'
                                    });
                                });
                            </script>
                            <!-- Range slider -->

                            <!-- Progress Bar with Download Bar -->
                            <div id="progressBar2" class="progressbar styled">
                                <span class="mark-left">0%</span>
                                <span class="mark-right">100%</span>
                                <div class="percent"></div>
                                <div class="total"></div>
                                <div class="elapsed"></div>
                                <div class="remained"></div>
                                <div class="pbar">
                                    <div id="downloadBar2" class="downloadbar">
                                        <div class="pbar"></div>
                                    </div>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    $('#progressBar2').anim_progressbar({
                                        totaltime: 180
                                    });
                                    $('#downloadBar2').anim_progressbar({
                                        totaltime: 100
                                    });
                                });
                            </script>
                            <!--/ Progress Bar with Download Bar -->

                            <h6 class="foo2">Tabs</h6>

                            <!-- tabs -->
                            <div class="tabs-framed styled">
                                <div class="inner">
                                    <ul class="tabs clearfix">
                                        <li class="active"><a href="#events" data-toggle="tab">Events</a></li>
                                        <li><a href="#reminder" data-toggle="tab"><sup class="note">3</sup>Reminder</a></li>
                                        <li><a href="#starred" data-toggle="tab">Starred</a></li>
                                        <li><a href="#archive" data-toggle="tab">Archive</a></li>
                                    </ul>
                                    <div class="tab-content boxed">
                                        <div class="tab-pane fade in active clearfix" id="events">
                                            <div class="tab-image pull-left"><img src="images/temp/tab-img-5.jpg" alt="" /></div>
                                            <h4>4 august 2013</h4>
                                            <p>He made his film debut with a minor part in Back to the Future</p>
                                            <a href="#" class="see-more">See more</a>
                                        </div>
                                        <div class="tab-pane fade clearfix" id="reminder">
                                            <div class="tab-image pull-right"><img src="images/temp/tab-img-6.jpg" alt="" /></div>
                                            <h4>5 November</h4>
                                            <p>He made his film debut with a minor part in Back to the Future</p>
                                            <a href="#" class="see-more">See more</a>
                                        </div>
                                        <div class="tab-pane fade clearfix" id="starred">
                                            <div class="tab-image pull-left"><img src="images/temp/tab-img-7.jpg" alt="" /></div>
                                            <h4>11 October</h4>
                                            <p>He made his film debut with a minor part in Back to the Future</p>
                                            <a href="#" class="see-more">See more</a>
                                        </div>
                                        <div class="tab-pane fade clearfix" id="archive">
                                            <div class="tab-image pull-right"><img src="images/temp/tab-img-8.jpg" alt="" /></div>
                                            <h4>14 September</h4>
                                            <p>He made his film debut with a minor part in Back to the Future</p>
                                            <a href="#" class="see-more">See more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/ tabs -->
                        </div>
                    </div>
                    <!--/ row -->

                    <!-- row -->
                    <div class="row">
                        <div class="col-sm-12">
                            <h6 class="foo2">Pricing Tables/Boxes</h6>

                            <!-- pricing1-->
                            <div class="pricing_box price_style1 clearfix">
                                <ul>
                                    <li class="price_col price_col_yellow">
                                        <!--pricing item-->
                                        <div class="price_item">
                                            <div class="inner">
                                                <div class="badge badge-popular"></div>
                                                <div class="price_col_head">
                                                    <span class="price"><em>$</em>99<sup>99</sup><span>/month</span></span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <strong>Basic</strong>
                                                            <span>All important futures for work</span>
                                                        </div>
                                                        <ul>
                                                            <li>250 SKU’s</li>
                                                            <li>1 GB Storage</li>
                                                            <li>3,5% transaction fee</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-gray"><span>Try a Week</span></a></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ pricing-item -->
                                    </li>

                                    <li class="price_col col_active">
                                        <!--pricing item-->
                                        <div class="price_item">
                                            <div class="inner">
                                                <div class="badge badge-popular"></div>
                                                <div class="price_col_head">
                                                    <span class="price"><em>$</em>299<sup>99</sup><span>/month</span></span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <strong>Premium</strong>
                                                            <span>Lots of clients &amp; users</span>
                                                        </div>
                                                        <ul>
                                                            <li>2,500 SKU’s</li>
                                                            <li>5 GB Storage</li>
                                                            <li>1,5% transaction fee</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-large btn-caps"><span>Buy Now</span></a></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ pricing-item -->
                                    </li>

                                    <li class="price_col price_col_purple">
                                        <!--pricing item-->
                                        <div class="price_item">
                                            <div class="badge badge-popular"></div>
                                            <div class="inner">
                                                <div class="price_col_head">
                                                    <span class="price"><em>$</em>499<sup>99</sup><span>/month</span></span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <strong>Ultimate</strong>
                                                            <span>All important futures for work</span>
                                                        </div>
                                                        <ul>
                                                            <li>Unlimited SKU’s</li>
                                                            <li>20 GB Storage</li>
                                                            <li>1% transaction fee</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-gray"><span>Subscribe Now</span></a></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ pricing-item -->
                                    </li>
                                </ul>
                            </div>
                            <!--/ pricing1-->
                        </div>
                    </div>
                    <!--/ row -->

                    <!-- row -->
                    <div class="row">
                        <div class="col-sm-6">
                            <h6 class="foo2">Video Player</h6>

                            <!-- Video Player -->
                            <div class="video-player">
                                <video id="video2" controls preload="none" poster="images/temp/vjs-poster-2.jpg" class="video-js vjs-styled-skin">
                                    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                                    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                                </video>
                                <script>
                                    videojs("video2", {
                                        "height": "auto",
                                        "width": "auto"
                                    }).ready(function() {
                                                var myPlayer = this; // Store the video object
                                                var aspectRatio = 19 / 39; // Make up an aspect ratio
                                                function resizeVideoJS() {
                                                    // Get the parent element's actual width
                                                    var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
                                                    // Set width to fill parent element, Set height
                                                    myPlayer.width(width).height(width * aspectRatio);
                                                }

                                                resizeVideoJS(); // Initialize the function
                                                window.onresize = resizeVideoJS; // Call the function on resize
                                            });
                                </script>
                            </div>
                            <!--/ Video Player -->
                        </div>

                        <div class="col-sm-4">
                            <h6 class="foo2">Calendar</h6>

                            <!-- widget calendar-->
                            <div class="widget-container widget-calendar boxed styled">
                                <div class="inner">
                                    <input type="text" name="date_departure" class="inputField" value="" id="date_departure">
                                    <script>
                                        // <![CDATA[
                                        jQuery(document).ready(function($) {
                                            var daysRange = 5;

                                            function assignCalendar(id){
                                                $('<div class="calendar" />')
                                                        .insertAfter( $(id) )
                                                        .multiDatesPicker({
                                                            dateFormat: 'yy-mm-dd',
                                                            minDate: new Date(),
                                                            maxDate: '+1y',
                                                            altField: id,
                                                            firstDay: 1,
                                                            showOtherMonths: true
                                                        }).prev().hide();
                                            }

                                            assignCalendar('#date_departure');
                                        });
                                        // ]]>
                                    </script>
                                </div>
                            </div>
                            <!--/ widget calendar-->
                        </div>

                        <div class="col-sm-2">
                            <!-- row level 2 -->
                            <div class="row knobs">
                                <div class="col-sm-12 col-xs-6">
                                    <h6 class="foo2">Balance</h6>

                                    <!-- Balance control -->
                                    <div class="widget-knob widget-balance">
                                        <input type="text" value="0" autocomplete="off" id="balance" />
                                        <script type="text/javascript">
                                            $(document).ready(function() {
                                                $('#balance').knobRot({
                                                    'classes': ['balance'],
                                                    'dragVertical': false,
                                                    'frameCount': 51,
                                                    'frameWidth': 87,
                                                    'frameHeight': 87,
                                                    'detent': true,
                                                    'detentThreshold': 2,
                                                    'minimumValue': -50,
                                                    'maximumValue': 50,
                                                    'hideInput': true
                                                });
                                            });
                                        </script>
                                    </div>
                                    <!--/ Balance control -->
                                </div>
                                <div class="col-sm-12 col-xs-6">
                                    <h6 class="foo2 last">Volume</h6>

                                    <!-- Volume control -->
                                    <div class="widget-knob widget-volume">
                                        <input type="text" value="100"  autocomplete="off" id="volume" />
                                        <script type="text/javascript">
                                            $(document).ready(function() {
                                                $('#volume').knobRot({
                                                    'classes': ['volume'],
                                                    'dragVertical': false,
                                                    'frameCount': 51,
                                                    'frameWidth': 81,
                                                    'frameHeight': 81,
                                                    'detent': true,
                                                    'detentThreshold': 5,
                                                    'minimumValue': 0,
                                                    'maximumValue': 100,
                                                    'hideInput': true
                                                });
                                            });
                                        </script>
                                    </div>
                                    <!--/ Volume control -->
                                </div>
                            </div>
                            <!-- row level 2 -->
                        </div>
                    </div>
                    <!--/ row -->

                    <!-- row -->
                    <div class="row">
                        <div class="col-sm-7">
                            <!-- row level 2 -->
                            <div class="row">
                                <div class="col-sm-4">
                                    <h6 class="foo2">Ribbons</h6>

                                    <div class="ribbons">
                                        <!-- Ribbons -->
                                        <div class="ribbon"><span></span></div>
                                        <div class="ribbon ribbon-orange"><span></span></div>
                                        <div class="ribbon ribbon-purple"><span></span></div>
                                        <!--/ Ribbons -->
                                    </div>
                                </div>

                                <div class="col-sm-4 col-xs-6">
                                    <h6 class="foo2">Scroll Bars</h6>

                                    <div class="scrollbars clearfix">
                                        <!-- ScrollBars -->
                                        <div class="scrollbar style5">
                                            <div class="inner">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                            </div>
                                        </div>
                                        <div class="scrollbar style4">
                                            <div class="inner">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                            </div>
                                        </div>
                                        <div class="scrollbar style3">
                                            <div class="inner">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                            </div>
                                        </div>
                                        <div class="scrollbar style2">
                                            <div class="inner">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                            </div>
                                        </div>
                                        <div class="scrollbar style1">
                                            <div class="inner">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                            </div>
                                        </div>
                                        <!--/ ScrollBars -->
                                    </div>
                                </div>

                                <div class="col-sm-4 col-xs-6 checkboxes">
                                    <h6 class="foo2">Switch ON / OFF</h6>

                                    <div class="input_styled checklist">
                                        <div class="rowCheckbox switch"><input name="signup1" type="checkbox" checked id="signup1" value="signup1"><label for="signup1"></label></div>
                                        <div class="rowCheckbox switch"><input name="signup2" type="checkbox" id="signup2" value="signup2"><label for="signup2"></label></div>
                                        <div class="rowCheckbox switch-large"><input name="signup3" type="checkbox" checked id="signup3" value="signup3"><label for="signup3"></label></div>
                                    </div>

                                    <h6 class="foo2 last">Checkbox ON / OFF</h6>

                                    <div class="input_styled checklist inline">
                                        <div class="rowCheckbox"><input name="signup4" type="checkbox" id="signup4" value="signup4"><label for="signup4"></label></div>
                                        <div class="rowCheckbox"><input name="signup5" checked type="checkbox" id="signup5" value="signup5"><label for="signup5"></label></div>
                                    </div>
                                    <div class="input_styled radiolist inline">
                                        <div class="rowRadio"><input type="radio" name="radio" value="radio1" id="radio1"><label for="radio1"></label></div>
                                        <div class="rowRadio"><input type="radio" name="radio" value="radio2" id="radio2" checked><label for="radio2"></label></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ row level 2 -->

                            <h6 class="foo2">Buttons</h6>

                            <div class="buttons-wrap">
                                <!-- Buttons -->
                                <div class="buttons margin-10">
                                    <a href="#" class="btn btn-left"><span>Prev</span></a>
                                    <a href="#" class="btn btn-middle"><span>Download all files</span></a>
                                    <a href="#" class="btn btn-right"><span>Next</span></a>
                                </div>

                                <div class="buttons margin-10">
                                    <a href="#" class="btn btn-left btn-acute"><span>Prev</span></a>
                                    <a href="#" class="btn btn-middle btn-acute"><span>Download all files</span></a>
                                    <a href="#" class="btn btn-right btn-acute"><span>Next</span></a>
                                </div>

                                <div class="buttons margin-10">
                                    <a href="#" class="btn btn-round btn-middle"><span>Normal</span></a>
                                    <a href="#" class="btn btn-round btn-middle hover"><span>Hover</span></a>
                                    <a href="#" class="btn btn-round btn-middle active"><span>Pressed</span></a>
                                </div>
                                <!--/ Buttons -->
                            </div>

                            <h6 class="foo2">Website Menu with dropdown submenu</h6>

                            <!-- Website Menu -->
                            <ul class="menu clearfix gradient margin-100">
                                <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                                <li><a href="#">Home</a></li>
                                <li class="hover"><a href="#">About</a>
                                    <ul>
                                        <li><a href="#">Web design</a></li>
                                        <li><a href="#">User interface</a></li>
                                        <li><a href="#">Social media</a>
                                            <ul>
                                                <li><a href="#">Gallery images</a></li>
                                                <li><a href="#">OneByOne Slider</a></li>
                                                <li><a href="#">Audio Player</a></li>
                                                <li><a href="#">Video Player</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Contacts</a></li>
                            </ul>
                            <!--/ Website Menu -->

                            <!-- row level 2 -->
                            <div class="row">
                                <div class="col-sm-8">
                                    <h6 class="foo2">Simple Graph</h6>

                                    <!-- Simple Graph -->
                                    <div class="widget-container widget-graph boxed">
                                        <div class="inner">
                                            <div id="graph" class="graph"></div>
                                        </div>
                                    </div>
                                    <!--/ Simple Graph -->
                                </div>

                                <div class="col-sm-4">
                                    <h6 class="foo2">Dropdown Menu</h6>

                                    <!-- Dropdown Menu -->
                                    <div class="dropdown gradient open">
                                        <a id="drop" href="#" role="button" class="dropdown-toggle gradient" data-toggle="dropdown"><span></span>Settings</a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="drop">
                                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Web design</a></li>
                                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">User interface</a></li>
                                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Social Media</a></li>
                                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Reminder</a></li>
                                        </ul>
                                    </div>
                                    <!--/ Dropdown Menu -->
                                </div>
                            </div>
                            <!--/ row level 2 -->
                        </div>

                        <div class="col-sm-5">
                            <h6 class="foo2">Simple Message Field</h6>

                            <!-- post comments -->
                            <div class="comment-list message-field">
                                <ol>
                                    <li class="comment">
                                        <div class="comment-body">
                                            <div class="comment-avatar">
                                                <div class="avatar"><img src="images/temp/avatar5.png" alt="" /></div>
                                            </div>
                                            <div class="comment-text">
                                                <div class="comment-author"><a href="#" class="link-author">Elijah Wood</a></div>
                                                <div class="comment-entry">He made his film debut with a minor part in Back to the Future Part II (1989), then landed a succession.</div>
                                            </div>
                                        </div>
                                    </li>
                                </ol>
                            </div>
                            <!--/ post comments -->

                            <h6 class="foo2">Rating Stars</h6>

                            <!-- Rating Stars -->
                            <div class="rating clearfix">
                                <span class="star on" rel="1"></span>
                                <span class="star on" rel="2"></span>
                                <span class="star on" rel="3"></span>
                                <span class="star off" rel="4"></span>
                                <span class="star off" rel="5"></span>
                            </div>
                            <!--/ Rating Stars -->

                            <h6 class="foo2">Tags</h6>

                            <!-- tags -->
                            <div class="tagcloud style2 margin-30">
                                <a href="#" title="2 topics"><span>Design</span></a>
                                <a href="#" title="3 topics"><span>Fashion Culture</span></a>
                                <a href="#" title="6 topics"><span>Web</span></a>
                                <a href="#" title="5 topics"><span>Electricity</span></a>
                                <a href="#" title="8 topics"><span>Kitchen</span></a>
                                <a href="#" title="9 topics"><span>Cinema</span></a>
                            </div>
                            <!--/ tags -->

                            <h6 class="foo2">Image Slider</h6>

                            <!-- Image Slider -->
                            <div class="widget-container widget-gallery boxed">
                                <div class="inner">
                                    <div id="myCarousel3" class="carousel slide" data-interval="20000">
                                        <!-- Carousel items -->
                                        <div class="carousel-inner">
                                            <div class="active item">
                                                <a href="#"><img src="images/temp/post-img-1.jpg" alt="" /></a>
                                                <div class="carousel-desc gradient"><strong>Brave</strong><span>&laquo;Change your fate.&raquo;</span></div>
                                            </div>
                                            <div class="item">
                                                <a href="#"><img src="images/temp/post-img-2.jpg" alt="" /></a>
                                                <div class="carousel-desc gradient"><strong>Ice Age</strong><span>&laquo;Change your fate.&raquo;</span></div>
                                            </div>
                                            <div class="item">
                                                <a href="#"><img src="images/temp/post-img-3.jpg" alt="" /></a>
                                                <div class="carousel-desc gradient"><strong>Horton</strong><span>&laquo;Change your fate.&raquo;</span></div>
                                            </div>
                                        </div>
                                        <!-- Carousel indicators -->
                                        <ol class="carousel-indicators">
                                            <li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
                                            <li data-target="#myCarousel3" data-slide-to="1"></li>
                                            <li data-target="#myCarousel3" data-slide-to="2"></li>
                                        </ol>
                                        <!-- Carousel nav -->
                                        <a class="carousel-control left" href="#myCarousel3" data-slide="prev"></a>
                                        <a class="carousel-control right" href="#myCarousel3" data-slide="next"></a>
                                    </div>
                                </div>
                            </div>
                            <!--/ Image Slider -->

                            <h6 class="foo2">Badges</h6>

                            <div class="badges">
                                <div class="badge style2"></div>
                                <div class="badge style2 badge-orange"></div>
                                <div class="badge style2 badge-purple"></div>
                            </div>

                            <h6 class="foo2">Avatar Placeholder</h6>

                            <!-- Profile -->
                            <div class="widget-container widget-profile boxed">
                                <div class="inner clearfix">
                                    <div class="avatar"><img src="images/temp/avatar.png" alt="" /></div>
                                    <h5>Bradley Cooper</h5>
                                    <span class="subtitle">Сomedian actor</span>
                                    <div class="follow">
                                        <a href="#" class="btn btn-follow"><span>Follow</span></a>
                                        <div class="followers">
                                            <strong>1687</strong>
                                            <span>followers</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Profile -->
                        </div>
                    </div>
                    <!--/ row -->
                </div>
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </div>
</div>
</body>
</html>